<template>
	<view class="zsxcx">
		<view>
			<image class="shangbiao" :src="sbimage[0].url"></image>
			<view class="divder"><h1>成为合作伙伴 打造美好品质</h1></view>
		</view>
		
		<view class="zsimage">
			<!-- <van-image width="10rem" height="10rem" fit="fill" :src="goditem.image" /> -->
			<image class="image" :src="goditem.imageurl" mode="aspectFit" @click="previewImage()"></image>
		</view>

		<view class="zstext">
			<view class="zstextprice">{{goditem.title}}</view>
			<view class="zstextxq">{{goditem.name}}</view>
			
		</view>
		<view class="zstextT">
			<view class="zstexttwo">
				详细参数
			</view>
			<view class="zstextthree">
				Detailed parameters
			</view>

		</view>
		<view class="xqshuju">
			<ul>
				<li>名&emsp;&emsp;称</li>&emsp;&emsp;&emsp;
				<li class="l2">{{goditem.ne}}</li>
			</ul>
			<ul>
				<li>类&emsp;&emsp;型</li>&emsp;&emsp;&emsp;
				<li class="l2">{{goditem.class}}</li>
			</ul>
			<ul>
				<li>材&emsp;&emsp;质</li>&emsp;&emsp;&emsp;
				<li class="l2">{{goditem.cail}}</li>
			</ul>
			<ul>
				<li>材料厚度</li>&emsp;&emsp;&emsp;
				<li class="l2">{{goditem.clhd}}</li>
			</ul>
			<ul>
				<li>材料颜色</li>&emsp;&emsp;&emsp;
				<li class="l2">{{goditem.ys}}</li>
			</ul>
			<ul>
				<li>其&emsp;&emsp;他</li>&emsp;&emsp;&emsp;
				<li class="l2">{{goditem.qita}}</li>
			</ul>
		</view>


		<view v-if="imagee.length>0" class="zsig">
			<!-- <van-image width="10rem" height="10rem" fit="fill" :src="goditem.image" /> -->
			<image v-for="item in imagee" :src="item.image_url" :key="item.objectId" @click="previewImageone(item.image_url)" mode="aspectFit"></image>

		</view>
		<view class="elsetext" v-else>
			<view>
				暂无图片
			</view>
		</view>
		<view class="ph" @click="gophone()">
			<view class="phone" >有意向点击联系我们</view>
		</view>



	</view>
</template>

<script>
	export default {
		name: 'zs',
		props: ['goditem', 'imagee','sbimage'],
		data() {
			return {
			
			}
		},
		
		
		onLoad() {
			
		},
		onShow() {
		
		}

		,
		methods: {
			gophone(){
				uni.switchTab({
					url:'/pages/myhome/myhome'
				})
			},
			previewImage() {
			  // console.log(this.goditem)
				uni.previewImage({
					urls:[this.goditem.imageurl],
					current:this.goditem.imageurl
				})
			  },
			  previewImageone(e) {
			  // console.log(e)
				uni.previewImage({
					urls:[e],
					current:e
				})
			  }
			  
		}
	}
</script>

<style>
	.ph {
		height: 90px;
	}

	.phone {
		width: fit-content;
		height: 40px;
		margin: 0 auto;
		/* border: 1px solid black; */
		text-align: center;
		line-height: 40px;
		font-size: 26px;
		background-color: coral;
		color: white;
		margin-top: 20px;

	}

	.divder {
		border-bottom: 1px solid rgb(245, 245, 245);
		height: 1px;
		margin-top: 3px;
		margin-bottom: 4px;
	}

	.shangbiao {
		width: 100px;
		height: 50px;
		border: 1px solid black;
	}

	.image {
		width: 100%;
		/* max-height: 100px; */
	}

	.zsimage {
		/* border: 1px solid black; */
		width: 100%;
		/* margin-top: 6px; */

	}

	.zstext {
		width: 340px;
		min-height: 100px;
		/* border: 1px solid black; */
		border-radius: 8%;
		margin-top: 10px;
		background-color: white;
		margin: 0 auto;
	}

	.zstextprice {
		margin-top: 10px;
		font-size: 24px;
		/* color: red; */
		margin-left: 14px;
	}

	.zstextxq {
		/* float: right; */
		font-size: 20px;
		margin-top: 10px;
		margin-left: 20px;
		flex-wrap: wrap;
		border-bottom: 1px solid rgb(245, 245, 245);
	}

	.zsig image {
		/* border: 1px solid black; */
		margin: 0 auto;
		width: 100%;
		background-color: white;
	}

	.zsig {
		margin-top: 6px;
	}

	.elsetext {
		/* border: 1px solid black; */
		width: 100%;
		height: 200px;
		background-color: white;
		margin-top: 6px;
	}

	.elsetext view {
		width: 80px;
		height: 50px;
		/* border: 1px solid black; */
		line-height: 200px;
		margin: 0 auto;
	}
	.zstextT{
		width: 340px;
		margin: 0 auto;
		border-radius: 5%;
		background-color:brown;
		margin-top: 5px;
		color: white;
	}
	.zstextT view{
		
		display: inline-block;
		
	}
	.zstexttwo {
		width: fit-content;
		margin-top: 5px;
		font-size: 21px;
		height: 30px;
		margin-left: 20px;
		
		/* border: 1px solid black; */
		line-height: 30px;
	}
	.zstextthree{
		width: fit-content;
		padding-left: 30px;
		font-size: 18px;
		/* border: 1px solid black; */
	}

	.jg {
		font-size: 16px;
	}
	.zsxcx{
		background-color: lightyellow;
		
	}
	.divder {
		/* border-bottom: 1px solid rgb(245, 245, 245); */
		/* border: 1px solid black; */
		height: 48px;
		width: 200px;
		float: right;
		margin: 0 auto;
		margin-right: 10px;
		
	}
	.divder h1{
		/* border: 1px solid black; */
		line-height: 48px;
		margin: 0 auto;
		size: 12px;
	}
	.xqshuju{
		width: 300px;
		margin: 0 auto;
		margin-top: 6px;
		background-color: white;
		border-radius: 5%;
	}
	.xqshuju ul{
		margin-left: 15px;
		margin-top: 8px;
	}
	.xqshuju ul li{
		
		display: inline;
	}
	.l2{
		margin-left: 30px;
	}
</style>